<template>
    <div class="form">
        <van-field v-model="tel" label="中国大陆86+" placeholder="请输入手机号" />
        <div class="my-button">
            <van-button color="#ff6666" :disabled="flag" block round @click="verify">下一步</van-button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Field , Button ,Dialog } from 'vant';
import { DocheckPhone } from '../../api/user'

Vue.use(Field);
Vue.use(Button)

export default {
    data(){
        return{
            tel:'',
            
        }
    },
    methods:{
        verify(){
            DocheckPhone({tel:this.tel}).then(res => {
                console.log(res);
                if(res.data.code === "10005"){
                    Dialog.confirm({
                        message: '该手机号已被注册，是否直接登录',
                        confirmButtonText:'直接登录',
                        confirmButtonColor: '#ff6666',
                        cancelButtonText: '取消',
                        cancelButtonColor: '#999'
                    })
                    .then(() => {
                        // on confirm
                        // console.log('确认');
                        // this.$router.push('/login')
                        this.$router.back()
                    })
                    .catch(() => {
                        // on cancel
                        console.log('取消');
                    });
                }else if(res.data.code === '200'){
                    Dialog.confirm({
                        message: '我们将发送短信验证码至您的手机号',
                        confirmButtonText: '确定',
                        confirmButtonColor: '#ff6666',
                        cancelButtonText: '取消',
                        cancelButtonColor: '#999'
                    })
                    .then(() => {
                        localStorage.setItem('tel' , this.tel)
                        this.$router.push('/register/step2')
                    })
                    .catch(() => {
                        console.log('取消');
                    });
                }
            })
        }
    },
    computed: {
        flag () {
            if (/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.tel)) {
                return false
            } else {
                return true
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.form
  .my-button
    margin-top 30px
</style>
